<template>
  <div class="codeAll">
    <!-- <div class="box_left">
      <Common-Slider-Bar
        ref="silderBar"
        :item-view-option="{
          itemTitle: 'PROGRAMNAME',
          key: 'PROGRAMNAME',
          menuTitle: 'PROGRAMNAME',
        }"
        :search-key="'PROGRAMNAME'"
        :request="{
          url: url + '/dynamicReportForm/queryBodyByProduce', method: 'post',
          data:searchData}"
        @select="menuChange"
      />
    </div> -->
    <div ref="code" class="code">
      <div class="code-top">
        <div class="code-top-left">
          <div class="code-top-left-code"><vue-qr :text="qrUrl" :size="260" /></div>
          <div class="code-top-left-info">
            <div class="code-top-left-info-title">
              <div class="code-top-left-info-title-left" :style="{'fontSize': 0.01245 * width + 'px'}">齐贤街道无障碍社区建设（迎驾桥社区）工程项目</div>
              <div class="code-top-left-info-title-icon-box">
                <div class="code-top-left-info-title-icon">
                  <img
                    src="@/assets/img/digitalReport1/icon.png"
                  >
                  <span class="lable">建设中</span>
                </div>
              </div>
            </div>
            <div class="code-top-left-info-bumen">
              <div class="code-top-left-info-lable">职能部门:</div>
              <div class="code-top-left-info-name">城建办</div>
            </div>
            <div class="code-top-left-info-bumen">
              <div class="code-top-left-info-lable">项目简述:</div>
              <div class="code-top-left-info-name" :style="{'fontSize': 0.011 * width + 'px'}">对齐贤街道迎驾桥社区的迎驾桥安置小区进行修缮、改造、增加各类无障碍设施，具体内容包括：社区坡道更改与增设…<a class="lookAll">查看全部</a></div>
            </div>
          </div>
        </div>
        <div class="code-top-center">
          <div class="code-top-center-money">
            <div v-for="item in data.projectBudget" :key="item.id" class="code-top-center-money-cate">
              <div class="code-top-center-money-cate-title" :style="{'fontSize': 0.0122 * width + 'px'}">
                {{ item.title }}:
              </div>
              <div class="code-top-center-money-cate-num" :style="{'color': item.color,'fontSize': 0.0122 * width + 'px'}">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="code-top-center-progress">
            <el-progress type="circle" stroke-linecap="butt" :show-text="false" :percentage="80" :width="190" :stroke-width="30" color="#1890ff" />
          </div>
        </div>
        <div class="code-top-right">
          <div class="code-top-right-rate">
            <div class="code-top-right-rate-name">资金使用率: <span class="code-top-right-rate-name-span">80%</span></div>
            <div class="code-top-right-rate-progress">
              <el-progress :show-text="false" :percentage="80" :stroke-width="20" color="#1890ff" />
            </div>
          </div>
          <div class="code-top-right-rate-interval" />
          <div class="code-top-right-rate">
            <div class="code-top-right-rate-name">项目完成度: <span class="code-top-right-rate-name-span">100%</span></div>
            <div class="code-top-right-rate-progress">
              <el-progress :show-text="false" :percentage="100" :stroke-width="20" color="#1890ff" />
            </div>
          </div>
        </div>
      </div>
      <div class="code-table">
        <div class="code-table-title">项目明细</div>
        <!-- <el-table
        :data="data.tableData"
        style="width: 100%"
      >
        <el-table-column label="储备立项" align="center">
          <el-table-column
            prop="name"
            label="文件依据"
            width="120"
          />
          <el-table-column label="地址" />
        </el-table-column>
      </el-table> -->
        <DynamicTables :table-data="data.tableData" :table-header="data.columnList" @openDialog="openDialog" />
      </div>
      <div class="dialog">
        <el-dialog
          title="巡查记录"
          :visible.sync="imgDialogVisible"
          :modal-append-to-body="false"
          width="60%"
        >
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="抽查巡查单" name="visaForm">
              <div class="dialog-visaForm"><VisaForm /></div>
            </el-tab-pane>
            <el-tab-pane label="项目现场图" name="first">
              <div v-loading="load" class="dialog-img">
                <div v-for="item in imgList" :key="item.id" class="dialog-img-one">
                  <!-- <img :src="item.src" alt="加载中" @click="lookImgBig(item.src)"> -->
                  <el-image
                    fit="contain"
                    style="width: 100px; height: 100px"
                    :src="item.src"
                    :preview-src-list="srcList"
                  />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="项目竣工资料" name="second">
              <div v-loading="load" class="dialog-img">
                <div v-for="item in imgListSecond" :key="item.id" class="dialog-img-one">
                  <!-- <img :src="item.src" alt="加载中"> -->
                  <el-image
                    fit="contain"
                    style="width: 100px; height: 100px"
                    :src="item.src"
                    :preview-src-list="srcList"
                  />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <span slot="footer" class="dialog-footer">
            <el-button @click="imgDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="imgDialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="dialogInfo">
        <el-dialog
          title="支付明细"
          :visible.sync="dialogInfo"
          :modal-append-to-body="false"
          width="80%"
        >
          <el-tabs v-model="active" @tab-click="activeClick">
            <el-tab-pane label="合同" name="first">
              <div class="dialog-img">
                <img width="100%" src="@/assets/img/digitalReport1/hetong1.jpg" alt="">
                <img width="100%" src="@/assets/img/digitalReport1/hetong2.jpg" alt="">
              </div>
            </el-tab-pane>
            <el-tab-pane label="发票" name="second">
              <div class="dialog-img">
                <img width="100%" src="@/assets/img/digitalReport1/fapiao.jpg" alt="">
              </div>
            </el-tab-pane>
            <el-tab-pane label="拨款凭证" name="three">
              <div class="dialog-img">
                <img width="100%" src="@/assets/img/digitalReport1/bokuan.jpg" alt="">
              </div>
            </el-tab-pane>
            <el-tab-pane label="银行回单" name="four">
              <div class="dialog-img">
                <img width="100%" src="@/assets/img/digitalReport1/huidan.jpg" alt="">
              </div>
            </el-tab-pane>
          </el-tabs>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogInfo = false">取 消</el-button>
            <el-button type="primary" @click="dialogInfo = false">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>

</template>

<script>
// import CommonSliderBar from '@/components/CommonSliderBar';
import vueQr from 'vue-qr';
import DynamicTables from './components/DynamicTables.vue';
import VisaForm from './components/VisaForm.vue';
import { data } from './data.js';
import { getGlobal } from '@/utils/global';
// import baseUrl from '@/utils/processRequest1';
import { getFilePage, getFileByPath, fileView } from '@/api/file';
export default {
  name: 'Code',
  components: {
    DynamicTables,
    vueQr,
    VisaForm
    // CommonSliderBar
  },
  data() {
    return {
      url: '',
      data,
      imgDialogVisible: false,
      activeName: 'visaForm',
      imgList: [],
      imgListSecond: [],
      load: false,
      fontSize: '',
      width: 0,
      height: 0,
      // bigImg: '',
      srcList: [],
      active: '',
      dialogInfo: false,
      qrUrl: ''
      // fileDialogVisible: true
    };
  },
  created() {
    this.getQrUrl();
    //
    // const { title, ENTERPRISECODE } = this.$route.query;
    // if (title && title.includes('一码通管')) {
    //   this.searchData = {
    //     pageIndex: 0,
    //     pageSize: 100,
    //     pageType: 1,
    //     tableId: 475,
    //     filterList: [{ col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }]
    //   };
    //   this.menuId = 1623551096894;
    // }
    // this.ENTERPRISECODEList = [{
    //   col: 'ENTERPRISECODE', value: ENTERPRISECODE
    // }];
    // this.init();
  },
  mounted() {
    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        this.width = entry.contentRect.width;
        // if (this.width > 1400) {
        //   this.width = 1400;
        // } else if (this.width <= 1400 || this.width >= 1200) {
        //   this.width = 1250;
        // } else if (this.width <= 1200 || this.width >= 1000) {
        //   this.width = 1100;
        // }
        // this.height = entry.contentRect.height;
      }
    });

    resizeObserver.observe(this.$el);
  },
  // async created() {
  //   await this.getImgPage();
  //   this.getImgListSecond();
  // },
  methods: {
    openDialog(row) {
      // if (id === '2021年3月20日-任务一') {
      //   this.activeName = 'first';
      //   this.getImgPage();
      //   this.imgDialogVisible = true;
      // } else {
      //   fileView(id);
      // }
      if (row === '2021年3月20日-任务一') {
        this.activeName = 'visaForm';
        // this.getImgPage();
        this.imgDialogVisible = true;
      } else {
        // fileView(id);
        if (row === '绍柯政办发〔2020〕18号') {
          fileView('C349E0B2C49818FBE053140A0A0ACB41');
        } else if (row === '绍柯审批投〔2020〕309') {
          fileView('C349D0168B1F18C9E053140A0A0ACC28');
        } else if (row === '公示单预览') {
          fileView('C34A2132F23018C3E053140A0A0AF90D');
        } else if (row === '城建办1月用款计划') {
          fileView('C3526A0566C927D4E053140A0A0A0A3C');
        } else if (row === '资金明细情况表') {
          fileView('C3515B07E4DB27DAE053140A0A0AEEBC');
        } else if (row === '2021预算金额：70.99') {
          fileView('C3526A0566CA27D4E053140A0A0A0A3C');
        } else if (row === '2021年1月15日-567900.00') {
          this.active = 'first';
          // this.getImgPage();
          this.dialogInfo = true;
        }
      }
    },
    handleClick({ name }) {
      if (name === 'first') {
        this.getImgPage();
      } else if (name === 'second') {
        this.getImgListSecond();
      }
    },
    activeClick() {

    },
    async getImgPage() {
      this.load = true;
      await getFilePage({
        pageIndex: 0,
        pageSize: 50,
        condition: '185',
        sort: '"uploadTime" DESC',
        type: ['S0004']
      }).then(async res => {
        const { success, data } = res;
        const arr = [];
        const arrlist = [];
        arr.length = arrlist.length = data.length;
        if (success) {
          for (let i = 0; i < data.length; i++) {
            await getFileByPath({
              filePath: data[i].path
            }).then(res => {
              arr[i] = {
                id: data[i].id,
                type: data[i].fileType,
                originName: data[i].originName,
                src: 'data:image/jpeg;base64,' + res.data
              };
              arrlist[i] = 'data:image/jpeg;base64,' + res.data;
            });
          }
          this.imgList = arr;
          this.srcList = arrlist;
        }
      });
      this.load = false;
    },

    async getImgListSecond() {
      this.load = true;
      await getFilePage({
        pageIndex: 0,
        pageSize: 50,
        condition: '185',
        sort: '"uploadTime" DESC',
        type: ['S0003']
      }).then(async res => {
        const { success, data } = res;
        const arr = [];
        const arrlist = [];
        arr.length = arrlist.length = data.length;
        if (success) {
          for (let i = 0; i < data.length; i++) {
            await getFileByPath({
              filePath: data[i].path
            }).then(res => {
              arr[i] = {
                id: data[i].id,
                type: data[i].fileType,
                originName: data[i].originName,
                src: 'data:image/jpeg;base64,' + res.data
              };
              arrlist[i] = 'data:image/jpeg;base64,' + res.data;
            });
          }
          this.imgListSecond = arr;
          this.srcList = arrlist;
        }
      });
      this.load = false;
    },
    getQrUrl() {
      getGlobal().then((all) => {
        this.qrUrl = all.res.data.qrUrl;
      });
    },

    // init() {
    //   baseUrl().then(res => {
    //     this.url = res.url;
    //     this.$nextTick(() => {
    //       this.$refs.silderBar.send();
    //     });
    //   });
    // },
    menuChange(obj) {
      this.baseInfo = obj.value;
      this.filterList = [{ col: 'PROGRAMNAME', value: obj.value.PROGRAMNAME }].concat(this.ENTERPRISECODEList);
    }
  }
};
</script>

<style lang="scss" scoped>
.codeAll{
  height: 100%;
  display: flex;
  .box_left{
    width: 200px;
    // height: calc(100% - 75px);
    background: #ffffff;
  }
}
.code {
  padding:15px;
  height: 100%;
  overflow: auto;
  font-family: PingFangSC, PingFangSC-Medium;
  .code-top{
    // height: 32%;
    // height: 278px;
    .el-progress{
      cursor: pointer;
    }
    display: flex;
    justify-content: space-around;
    color: rgba(0,0,0,0.45);
    .code-top-left{
      background-color: #fff;
      flex: 43;
      // min-width: 725px;
      border-radius: 4px;
      display: flex;
      .code-top-left-code{
        width: 267px;
        height: 234px;
        padding-top: 10px;
        padding-left: 8px;
        // margin: 23px;
      }
      .code-top-left-info{
        margin: 23px 12px 23px 0;
        width: calc(100% - 280px);
        // overflow: hidden;
        .code-top-left-info-title{
          display: flex;
          .code-top-left-info-title-left{
            flex: 5;
            // font-size: 20px;
            color: #333333;
            text-align: left;
          }
          .code-top-left-info-title-icon-box{
            flex: 2;
            padding-left: 15px;
            padding-top: 5px;
            cursor: pointer;
            .code-top-left-info-title-icon{
              border: 2px solid #15be50;
              padding-left: 2px;
              width: 74px;
              height: 26px;
              border-radius: 3px;
              // display: f;
              .lable {
                font-size: 14px;
                padding-top: 2px;
                color: #15be50;
              }
            }
          }
        }
        .code-top-left-info-bumen{
          color: #999;
          font-size: 18px;
          .code-top-left-info-lable{
            padding-top: 4px;
            padding-bottom: 4px;
          }
          .code-top-left-info-name{
            color: #444;
            overflow: hidden;
            .lookAll{
              color: #1890ff;
              text-decoration: underline;
            }
          }
        }
      }
    }
    .code-top-center{
      border-radius: 4px;
      margin: 0 15px;
      background-color: #fff;
      flex: 20;
      // min-width: 468px;
      display: flex;
      padding: 30px;
      .code-top-center-money{
        flex: 16.8;
        color: rgba(0,0,0,0.45);
        font-weight: 500;
        font-size: 18px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .code-top-center-money-cate{
          width: 100%;
          // padding: 5.5px 0;
          .code-top-center-money-cate-num{
            font-weight: 600;
            padding-top: 4px;
          }
        }
      }
      .code-top-center-progress{
        flex: 30;
        & >>> svg path:first-child {
          stroke: #f7c739;
        }
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .code-top-right{
      border-radius: 4px;
      background-color: #fff;
      flex: 23;
      // min-width: 580px;
      .code-top-right-rate{
        height: 127px;
        padding: 26px 21px;
        border-radius: 4px;
        .code-top-right-rate-name{
          font-size: 18px;
          padding-bottom: 19px;
          .code-top-right-rate-name-span{
            font-size: 28px;
            color: #666666;
            font-weight: 600;
            padding-left: 4px;
          }
        }
      }
       .code-top-right-rate-interval{
          height: 24px;
          background-color: #E6E9F0;
        }
    }
  }
  .code-table{
    background-color: #fff;
    margin-top: 15px;
    height: calc(100% - 295px);
    // height: 590px;
    // min-height: 464px;
    border-radius: 4px;
    padding: 24px;
    .code-table-title{
      // font-size: 24px;
      color: #333333;
      padding-bottom: 22px;
    }
  }
  .dialogInfo{
    .dialog-img{
      height: calc(96vh - 200px);
      overflow: auto;
    }
  }
  .dialog{
    .el-dialog{
      .dialog-visaForm {
        height: calc(96vh - 200px);
        overflow: auto;
        display: flex;
        justify-content: center;
      }
      .dialog-img{
        height: calc(96vh - 200px);
        overflow: auto;
        display: flex;
        // justify-content: space-around;
        flex-wrap: wrap;
        .dialog-img-one{
          background-color: #ccc;
          width: 32%;
          margin: 2px;
          height: 300px;
          padding: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          .el-image{
            width: 100% !important;
            height: 100% !important;
          }
        }
        img {
          max-width: 100%;
          max-height: 100%;
          cursor: pointer;
          // width: calc(33.3333% - 5.3333px);
          // padding: 4px;
          // display: flex;
          // justify-content: space-around;
        }
      }

    }

  }
  .fileDialog{
    ::v-deep .el-dialog__body{
      min-height: calc(98vh - 150px);
    }
  }
}
</style>
